<!DOCTYPE html>
<html>
<head>

    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>&lt;img&gt; elements</title>

    <style type="text/css">

        img {
            border-radius: 40px;
            behavior: url(../build/PIE_uncompressed.htc);
            border: 0;
            position: relative;
        }

        #shadow {
            -webkit-box-shadow: 0 0 10px red;
            -moz-box-shadow: 0 0 10px red;
            box-shadow: 0 0 10px red;
        }

        #pngfixCont {
            padding: 10px;
            background: url(background1.gif);
        }
        #pngfix {
            border-radius: 0;
            -pie-png-fix: true;
        }

    </style>

</head>
<body>

    <h1>Images</h1>

    <h2>Rounded corners</h2>
    <img src="photo.jpg" />

    <h2>Rounded, scaled down</h2>
    <img src="photo.jpg" width="320" height="240" />

    <h2>Aspect</h2>
    <img src="photo.jpg" width="128" height="480" />
    <img src="photo.jpg" width="640" height="128" />


    <h2>With shadow</h2>
    <img src="photo.jpg" id="shadow" width="320" height="240" />

    <h2>In link (should remain clickable)</h2>
    <a href="#" onclick="alert('clicked'); return false;"><img src="photo.jpg" width="320" height="240" /></a>

    <h2>With border</h2>
    <img src="border.png" style="border:10px solid red;" />

    <h2>With padding</h2>
    <img src="border.png" style="border:10px solid red; padding: 5px;" />

    <h2>Rollover</h2>
    <img src="icon-safari.png" onmouseover="this.src='icon-chrome.png'" onmouseout="this.src='icon-safari.png'" />

</body>
</html>